<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/bearing.css">
    <link rel="stylesheet" href="css/order.css">
    <script src="js/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/echarts.min.js"></script>
    <!-- ...（省略其他脚本引用）... -->
    <style>
        /* 添加一些基本的CSS样式来美化按钮和表格 */
        .buttons-group {
            margin-bottom: 20px;
        }

        .el-button {
            margin-right: 10px;
        }

        .action-buttons {
            text-align: right;
        }
    </style>
</head>

<body>
<div id="bearingPage" class="appPage">
    <header>
        <div class="projectName">汽车轴承剩余寿命预测平台</div>
        <div class="routeList">
            <a href="index.jsp">首页</a>
            <a href="BearingServlet">轴承</a>
            <a href="life.html">寿命监测</a>
            <a href="./order.html">订单管理</a>
            <a href="aboutUs.html">关于我们</a>
        </div>
        <div class="adminInfo">
            <el-tooltip content="数据可视化" placement="top">
                <a href="车辆综合管控平台/index.html"><i class="el-icon-data-line"></i></a>
            </el-tooltip>
            <div class="avatar">
                <i class="el-icon-user-solid" onclick="x()"></i>
            </div>
        </div>
    </header>
    <!-- ...（省略header内容）... -->
    <main>
        <div class="buttons-group">
            <el-button type="primary" @click="showAddDialog">增加</el-button>
            <el-button type="info" @click="showSearchDialog">搜索</el-button>
        </div>
        <div class="bearingInfo">
            <table border="0">
                <thead>
                <tr>
                    <th>轴承类型</th>
                    <th>轴承型号</th>
                    <th>标准值</th>
                    <th>预测寿命</th>
                    <th>图片展示</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="bearing" items="${bearings}">
                    <tr>
                        <td>${bearing.type}</td>
                        <td>${bearing.model}</td>
                        <td>${bearing.data}</td>
                        <td>${bearing.life}</td>
                        <td><img style="width: 100px; height: 100px" src="${bearing.imgSrc}"></td>
                        <td class="action-buttons" content="center">
                            <el-button type="warning" size="mini" @click="showEditDialog(${bearing.id})">修改
                            </el-button>
                            <el-button type="danger" size="mini" @click="confirmDelete(${bearing.id})">删除</el-button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </main>
</div>

<%--<el-dialog title="增加轴承" :visible.sync="addDialogVisible" width="30%">--%>
<%--    <!-- 增加轴承的表单内容 -->--%>
<%--    <span slot="footer" class="dialog-footer">--%>
<%--        <el-button @click="addDialogVisible = false">取 消</el-button>--%>
<%--        <el-button type="primary" @click="addBearing">确 定</el-button>--%>
<%--    </span>--%>
<%--</el-dialog>--%>

<%--<el-dialog title="搜索轴承" :visible.sync="searchDialogVisible" width="30%">--%>
<%--    <!-- 搜索轴承的表单内容 -->--%>
<%--    <span slot="footer" class="dialog-footer">--%>
<%--        <el-button @click="searchDialogVisible = false">取 消</el-button>--%>
<%--        <el-button type="primary" @click="searchBearing">搜 索</el-button>--%>
<%--    </span>--%>
<%--</el-dialog>--%>

<%--<el-dialog title="修改轴承" :visible.sync="editDialogVisible" width="30%">--%>
<%--    <!-- 修改轴承的表单内容，这里需要传入当前编辑的轴承数据 -->--%>
<%--    <span slot="footer" class="dialog-footer">--%>
<%--        <el-button @click="editDialogVisible = false">取 消</el-button>--%>
<%--        <el-button type="primary" @click="updateBearing">确 定</el-button>--%>
<%--    </span>--%>
<%--</el-dialog>--%>

<script>
    function x() {
        window.location.href = 'UserListServlet'
    }
    new Vue({
        el: '#bearingPage',
        data: {
            addDialogVisible: false,
            searchDialogVisible: false,
            editDialogVisible: false,
            // 其他数据，如搜索条件、当前编辑的轴承数据等
        },
        methods: {
            showAddDialog() {
                window.location.href = 'bearingAdd.jsp';
            },
            showSearchDialog() {
                this.searchDialogVisible = true;
                // 初始化搜索对话框的数据
            },
            showEditDialog(id) {
                this.editDialogVisible = true;
                // 根据id加载当前编辑的轴承数据
            },
            confirmDelete(id) {
                // 确认删除的逻辑，可以弹出确认对话框
                if (confirm('确定要删除这个轴承吗？')) {
                    // 执行删除操作，发送请求到服务器
                    window.location.href = 'UserListDel?id=' + id;
                }
            },
            addBearing() {
                // 提交增加轴承的表单数据到服务器
                this.addDialogVisible = false;
            },
            searchBearing() {
                // 提交搜索轴承的表单数据到服务器，并更新表格内容
                this.searchDialogVisible = false;
            },
            updateBearing() {
                // 提交修改轴承的表单数据到服务器
                this.editDialogVisible = false;
            }
        }
    });
</script>

</body>

</html>